<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../../bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../bootstrap-icons/font/bootstrap-icons.min.css">
    <link rel="stylesheet" href="../../css/index.css">
    <link rel="shortcut icon" href="../../img/A.png"  type="image/x-icon">
    <script src="../../bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="../../bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="../../vue/jquery.min.js"></script>
    <script src="../../vue/vue.min.js"></script>
    <title>后台管理系统</title>
    <script src="../../echarts/echarts.min.js"></script>
</head>

<body>
<!-- 页面的起步 -->
<div class="container pt-5" style="font-family:'Times New Roman', Times, serif;">
    <div class="row">
        <!--页面导航栏列表 -->
        <div class="col-md-2">
            <!-- 网站logo -->
            <div class="mb-5 bg-light"
                 style="font-family:fantasy;direction: ltr; position: fixed;z-index: 10; left: 65px; top: 38px;">
                <h3><img style=" width: 20%; height: 20%;" src="../../img/A.png"/><span>ArkanTv</span></h3>
            </div>

            <!-- 垂直导航栏 展示导航 -->
            <div class="col-md-2" style="position: fixed;top: 100px; overflow-y:auto;height: 80vh; direction:rtl;">
                <nav class="navbar bg-light" style="direction: ltr;">
                    <div class="container-fluid">
                        <ul class="nav nav-pills flex-column text-start">
                            <li class="nav-item mb-2">
                                <a class="nav-link" href="index.html"><i class="bi bi-text-indent-left"></i><span
                                        class="m-3">统计</span></a>
                            </li>
                            <li class="nav-item mb-2">
                                <a class="nav-link" href="movie"><i class="bi bi-camera-video"></i><span
                                        class="m-3">电影</span></a>
                            </li>

                            <li class="nav-item mb-2">
                                <a class="nav-link" href="of_play"><i class="bi bi-play-btn"></i><span
                                        class="m-3">短视频</span></a>
                            </li>

                            <li class="nav-item mb-2">
                                <a class="nav-link" href="user"><i class="bi bi-person-add"></i><span
                                        class="m-3">用户管理</span></a>
                            </li>

                            <li class="nav-item mb-2">
                                <a aria-current="page" class="nav-link" href="coin"><i
                                        class="bi bi-coin"></i><span
                                        class="m-3">会员金额</span></a>
                            </li>

                            <li class="nav-item mb-2">
                                <a aria-current="page" class="nav-link active" href="prizes"><i
                                        class="bi bi-cash-stack"></i><span
                                        class="m-3">抽奖礼品</span></a>
                            </li>

                            <li class="nav-item mb-2">
                                <a aria-current="page" class="nav-link" href="selection"><i
                                        class="bi bi-signpost-split"></i><span
                                        class="m-3">导航列表</span></a>
                            </li>

                        </ul>
                    </div>
                </nav>
            </div>

        </div>

        <!-- 页面的col-10部分 -->
        <div class="col-md-10 pb-5" style="z-index: 10;" id="prizesApp">
            <!-- 日期 / 搜索 -->
            <div class="row">
                <div class="col-md-5">

                    <!-- 当前日期 -->
                    <div class="text-start">
                        <h3>当前日期</h3>
                        <p style="font-family:fantasy;" v-text="currentDate"></p>
                    </div>
                </div>

                <!-- 搜索框 -->
                <div class="col-md-4">
                    <form>
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="输入关键字...">
                            <span class="input-group-text"><button type="button" class="btn  btn-sm"><i
                                    class="bi bi-search"></i></button></span>
                        </div>
                    </form>
                </div>

                <!-- 登录图标-->
                <div class="col-md-3 text-end">
                    <span>ArTv10001</span>
                    <img src="../../img/tu2.jpg" style="border-radius: 100%; width: 65px; height: 65px;"/>
                </div>
            </div>

            <!-- 本站导航栏 -->
            <div class="row">
                <div class="col-md-12">
                    <!-- 导航 -->
                    <ul class="nav nav-pills">
                        <li class="nav-item">
                            <a class="nav-link active" data-bs-toggle="pill" href="#home">抽奖礼品</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="pill" href="#menu1">敬请期待</a>
                        </li>
                    </ul>


                    <div class="tab-content">
                        <!--            提示框-->
                        <div v-show="isMessage" style="position: fixed;z-index: 10;top: 20px; left: 50%"
                             class="col-md-2 bg-primary p-1 text-center text-white rounded-1"><b v-text="message"></b>
                        </div>
                        <!-- 会员卡片 -->
                        <div class="tab-pane container active text-center " id="home">
                            <!--         加载动画-->
                            <div class="spinner" v-show="load">
                                <div class="bounce1"></div>
                                <div class="bounce2"></div>
                                <div class="bounce3"></div>
                            </div>
                            <div class="row">
                                <div class="col-md-5 text-black rounded-3 pb-3 m-4 text-center"
                                     style="background-color: #EDE5EC" v-for="(res,index) in prizes">
                                    <h4 class="mt-2" v-text="res.name">会员1</h4>
                                    <div class="text-start row">
                                        <div class="col-md-6">
                                        <div class="mt-3"><b>礼品名称:</b> <span class="mx-2">{{res.text}}</span></div>
                                        <div class="mt-3"><b>中奖几率:</b> <span class="mx-2">{{res.ranges}} %</span></div>
                                        <div class="mt-3"><b>会员期限:</b> <span class="mx-2">{{res.time}} 天</span></div>
                                        <div v-bind:id="res.id" v-show="res.id === isVisible">
                                            <div class="nav-item">
                                                <div class="form-floating mb-3 mt-3">
                                                    <input type="text" v-model="res.text" class="form-control" id="weibiao"
                                                           placeholder="Enter email"
                                                           name="email">
                                                    <label for="weibiao">礼品标题:</label>
                                                </div>
                                            </div>
                                            <div class="nav-item">
                                                <div class="form-floating mb-3 mt-3">
                                                    <input v-model="res.ranges" type="text" class="form-control" id="Id"
                                                           placeholder="Enter email"
                                                           name="videoId">
                                                    <label for="id">中奖几率:</label>
                                                </div>
                                            </div>
                                            <!-- 维标题 -->
                                            <div class="nav-item">
                                                <div class="form-floating mb-3 mt-3">
                                                    <input type="text" v-model="res.time" class="form-control" id="weibiao"
                                                           placeholder="Enter email"
                                                           name="email">
                                                    <label for="weibiao">赠送天数:</label>
                                                </div>
                                            </div>
                                            <!-- 维标题 -->
                                            <div class="nav-item">
                                                <div class="form-floating mb-3 mt-3">
                                                    <input type="text" v-model="res.src" class="form-control" id="weibiao"
                                                           placeholder="Enter email"
                                                           name="email">
                                                    <label for="weibiao">相关图片:</label>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="mt-3">
                                            <a class=" d-grid" v-bind:href="'#'+res.id" data-bs-toggle="collapse"><button
                                                    type="button"  @click="onUpdate(prizes[index])" class="btn btn-primary btn-block">修改信息</button></a>
                                        </div>
                                        </div>
                                        <div class="col-md-6">
                                            <img class="img-fluid" v-bind:src="res.src">
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <!-- 敬请期待 -->
                        <div class="tab-pane container fade" id="menu1">

                        </div>

                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
</body>
<!-- 周度 -->
<script src="../../js/prizes.js"></script>
<script src="../../js/utils.js"></script>
</html>